<template>
  <div class="container">
    <div>
      <!-- 头部 -->
      <b-card title="王二小婚礼" tag="article">
        <b-card-img src="http://pic.5tu.cn/uploads/allimg/0911/240306366090.jpg" class="rounded-0"></b-card-img>
        <b-card-text>礼金总额：￥{{ total_money }}</b-card-text>
      </b-card>
    </div>

    <div>
      <div>
        <h3>对表格进行一些操作的界面</h3>
      </div>
      <div>
        <!-- 主界面表格 -->
        <b-table
          sticky-header
          no-border-collapse
          bordered
          hover
          :items="main_items"
          :fields="fields"
        >
          <template v-slot:cell(money)="data">￥{{ data.item.money }}</template>
          <template v-slot:cell(action)="row">
            <b-button size="sm" variant="danger">删除</b-button>
          </template>
        </b-table>
      </div>
    </div>

    <div>
      <div>
        <!-- 单人来 -->
        <b-button v-b-modal.sig_modal variant="btn btn-outline-primary btn-lg btn-block">单人</b-button>
        <b-modal id="sig_modal" title="添加单人" hide-footer>
          <b-form @submit.prevent="add_sigle" @reset.prevent="onReset">
            <b-form-group id="sigle-input-name" label="姓名" label-for="sigle-name">
              <b-form-input id="sigle-name" v-model="sigle_name" required placeholder="请输入姓名"></b-form-input>
            </b-form-group>

            <b-form-group id="sigle-input-money" label="礼金" label-for="sigle-money">
              <b-form-input id="sigle-money" v-model="sigle_money" required placeholder="请输入礼金"></b-form-input>
            </b-form-group>

            <b-form-group id="sigle-input-address" label="地址:" label-for="sigle-address">
              <b-form-input id="sigle-address" v-model="sigle_address" placeholder="请输入地址" required></b-form-input>
            </b-form-group>

            <b-button type="submit" variant="primary" id="sigle_submit">确定</b-button>
            <b-button type="reset" variant="danger" id="sigle_reset">重置</b-button>
          </b-form>
        </b-modal>
      </div>

      <div>
        <!-- 多人来 -->
        <b-button v-b-modal.mul_modal variant="btn btn-outline-primary btn-lg btn-block">多人</b-button>
        <b-modal id="mul_modal" title="添加多人" hide-footer>
          <b-form @submit.prevent="add_mul_mater" @reset.prevent="onReset_mul_master">
            <b-form-group id="input-master-name" label="主家姓名" label-for="master-name">
              <b-form-input
                id="master-name"
                v-model="mul_master_name"
                required
                placeholder="请输入主家姓名"
              ></b-form-input>
            </b-form-group>

            <b-form-group id="input-master-money" label="主家礼金" label-for="master-money">
              <b-form-input
                id="master-money"
                v-model="mul_master_money"
                required
                placeholder="请输入主家礼金"
              ></b-form-input>
            </b-form-group>

            <b-form-group id="input-master-address" label="主家地址" label-for="master-address">
              <b-form-input
                id="master-address"
                v-model="mul_master_address"
                placeholder="请输入主家地址"
                required
              ></b-form-input>
            </b-form-group>

            <b-button type="submit" variant="primary">确定</b-button>
            <b-button type="reset" variant="danger">重置</b-button>
          </b-form>

          <div>
            <hr />
          </div>

          <div>
            <div>
              <b-button v-b-modal.add_mul_one variant="btn btn-outline-primary btn-lg btn-block">添加</b-button>
              <b-modal id="add_mul_one" title="添加" hide-footer>
                <b-form @submit.prevent="add_mul_one" @reset.prevent="onReset_mul_one">
                  <b-form-group id="mul-one-input-name" label="姓名" label-for="mul_name">
                    <b-form-input id="mul_name" v-model="mul_name" required placeholder="请输入姓名"></b-form-input>
                  </b-form-group>

                  <b-form-group id="mul-one-input-money" label="礼金" label-for="mul_money">
                    <b-form-input id="mul_money" v-model="mul_money" required placeholder="请输入礼金"></b-form-input>
                  </b-form-group>

                  <b-form-group id="input-address" label="地址:" label-for="mul_address">
                    <b-form-input
                      id="mul_address"
                      v-model="mul_address"
                      placeholder="请输入地址"
                      required
                    ></b-form-input>
                  </b-form-group>

                  <b-button type="submit" variant="primary" id="mul_submit">确定</b-button>
                  <b-button type="reset" variant="danger" id="mul_reset">重置</b-button>
                </b-form>
              </b-modal>
            </div>

            <div>
              <hr />
            </div>

            <div>
              <!-- 子界面表格 -->
              <b-table
                sticky-header
                no-border-collapse
                bordered
                hover
                :items="sub_items"
                :fields="fields"
              >
                <template v-slot:cell(action)="row">
                  <b-button size="sm" variant="danger">删除</b-button>
                </template>
              </b-table>
            </div>
          </div>

          <b-button type="submit" variant="primary" @click="submit_mul_items">全部提交</b-button>
          <b-button type="reset" variant="danger" @click="reset_mul_items">全部重置</b-button>
          <b-button type="button" variant="primary" @click="onCancel">关闭</b-button>
        </b-modal>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

// import TotalView from "./TotalView"
// import TableList from "./TableList"
// import MenuBar from "./MenuBar"

export default {
  name: "Home",
  data() {
    return {
      total_money: 0,

      show_sig_modal: false,

      add_sigle_api: "http://localhost:5000/api/add_sigle",
      add_multi_api: "http://localhost:5000/api/add_multi",
      get_all_api: "http://localhost:5000/api/get_all",
      sigle_name: "",
      sigle_money: 0,
      sigle_address: "",

      mul_master_name: "",
      mul_master_money: 0,
      mul_master_address: "",

      mul_name: "",
      mul_money: 0,
      mul_address: "",

      test: [],
      main_items: [],
      sub_items: [],

      fields: [
        { key: "index", label: "序列", sortable: true },
        { key: "name", label: "姓名", sortable: true },
        { key: "money", label: "礼金", sortable: true },
        { key: "address", label: "地址", sortable: true },
        { key: "datetime", label: "时间" },
        { key: "action", label: "操作" }
      ]
    };
  },

  components: {
    // TotalView,
    // TableList,
    // MenuBar
  },

  methods: {
    getFormatDate() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();
      return currentDate;
    },

    add_sigle() {
      var sigle_one = {
        index: 0,
        name: this.sigle_name,
        money: this.sigle_money,
        address: this.sigle_address,
        datetime: this.getFormatDate()
      };
      // this.main_items.push(sigle_one);
      axios.post(this.add_sigle_api, sigle_one).then(res => {
        console.log("res=>", res["data"]["records"]);
        this.main_items = res["data"]["records"];
      });

      // this.total_money += parseInt(this.sigle_money);
      this.$root.$emit("bv::hide::modal", "sig_modal");
    },

    onReset() {
      (this.sigle_name = ""), (this.sigle_money = 0);
      this.sigle_address = "";
    },

    add_mul_mater() {
      var item = {
        index: 0,
        name: this.mul_master_name,
        money: this.mul_master_money,
        address: this.mul_master_address,
        datetime: this.getFormatDate()
      };
      this.sub_items.push(item);
    },
    onReset_mul_master() {
      this.mul_master_name = "";
      this.mul_master_money = 0;
      this.mul_master_address = "";
    },
    add_mul_one() {
      var item = {
        index: 0,
        name: this.mul_name,
        money: this.mul_money,
        address: this.mul_address,
        datetime: this.getFormatDate()
      };
      this.sub_items.push(item);
      this.$root.$emit("bv::hide::modal", "add_mul_one");
    },
    onReset_mul_one() {
      this.mul_name = "";
      this.mul_money = 0;
      this.mul_address = "";
    },

    submit_mul_items() {
      // this.sub_items.forEach(item => {
      //   this.main_items.push(item);
      // });

      axios.post(this.add_multi_api, { records: this.sub_items }).then(res => {
        console.log("res=>", res["data"]["records"]);
        this.main_items = res["data"]["records"];
      });

      this.sub_items = [];
      this.sub_items = [];
      this.mul_master_name = "";
      (this.mul_master_money = ""), (this.mul_master_address = "");
      this.mul_name = "";
      this.mul_money = 0;
      this.mul_address = "";
      this.$root.$emit("bv::hide::modal", "mul_modal");
    },

    reset_mul_items() {
      this.sub_items = [];
      this.mul_master_name = "";
      (this.mul_master_money = ""), (this.mul_master_address = "");
      this.mul_name = "";
      this.mul_money = 0;
      this.mul_address = "";
    },

    onCancel() {
      this.sub_items = [];
      this.mul_master_name = "";
      (this.mul_master_money = ""), (this.mul_master_address = "");
      this.mul_name = "";
      this.mul_money = 0;
      this.mul_address = "";
      this.$root.$emit("bv::hide::modal", "mul_modal");
    }
  },
  watch: {
    main_items: function(newval, oldVal) {
      // console.log(newval, oldVal);
      var tmp = 0;
      newval.forEach(element => {
        tmp += parseInt(element.money);
      });
      this.total_money = tmp;
    }
  },

  beforeMount: function() {
    axios.get(this.get_all_api).then(res => {
      console.log("res=>", res["data"]["records"]);
      this.main_items = res["data"]["records"];
    });
  }
};
</script>

<style>
.container {
  margin-bottom: 120px;
}
</style>